<template>
  <div class="jiaoxueqingkuang">
    <el-form ref="jxqkform" :model="jxqkform" label-width="80px">
      <div class="bigbox" id="bigboxjx">
        <div class="daifuzhi" id="daifuzhijx">
          <el-form-item label="学年" prop="xn">
            <el-date-picker
              v-model="jxqkform.xn"
              align="right"
              type="monthrange"
              value-format="yyyy-MM"
              placeholder="选择日期"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              clearable
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="学期" prop="xq">
            <el-select
              clearable
              v-model="jxqkform.xq"
              filterable
              placeholder="请选择"
            >
              <el-option
                v-for="item in semester"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="课程类型" prop="kclx">
            <el-select
              clearable
              v-model="jxqkform.kclx"
              filterable
              placeholder="请选择"
            >
              <el-option
                v-for="item in curriculumtype"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="教学对象" prop="jxdx">
            <el-select
              clearable
              v-model="jxqkform.jxdx"
              filterable
              placeholder="请选择"
            >
              <el-option
                v-for="item in teachingobj"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item class="dingwei" label="课时量" prop="ksl">
            <el-input
              v-model="jxqkform.ksl"
              placeholder="请输入"
              clearable
            ></el-input>
          </el-form-item>
        </div>
      </div>
      <el-button @click="copeitem('jxqk')" class="addxueli"
        ><i>＋</i>添加</el-button
      >
      <el-form-item class="lastitem">
        <el-button @click="resetForm('jxqkform')">重置</el-button>
        <el-button class="cha" type="primary" @click="onSubmit('jxqkform')"
          >保存</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>


<script>
import $ from "../../assets/jquery.min.js";
import ajax from "../../api/ajax.js";
import qs from "qs";

export default {
  props: { cldgh: { type: String } },

  data() {
    return {
      // 教学情况数据
      jxqkform: {
        gh: "",
        jxdx: "",
        kclx: "",
        ksl: "",
        xn: "",
        xq: "",
      },
      //学期
      semester: [
        {
          value: "第一学期",
          label: "第一学期",
        },
        {
          value: "第二学期",
          label: "第二学期",
        },
      ],
      // 课程类型
      curriculumtype: [
        {
          value: "公共必修",
          label: "公共必修",
        },
        {
          value: "公共选修",
          label: "公共选修",
        },
        {
          value: "专业必修",
          label: "专业必修",
        },
        {
          value: "专业选修",
          label: "专业选修",
        },
        {
          value: "专题讲座",
          label: "专题讲座",
        },
      ],
      //   教学对象
      teachingobj: [
        {
          value: "学生",
          label: "学生",
        },
        {
          value: "教师",
          label: "教师",
        },
      ],
    };
  },
  methods: {
    //重置
    resetForm(form) {
      this.$refs[form].resetFields();
    },
    //提交
    onSubmit(formName) {
      console.log(formName);
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          if (formName == "jxqkform") {
            this.jxqkform.xn =this.jxqkform.xn[0].substring(0,4)+"-"+this.jxqkform.xn[1].substring(0,4)
        
            this.jxqkform.gh = this.cldgh;
            if (this.jxqkform.gh == "" || undefined) {
              this.$message.error("请先添加老师的基本信息");
            } else {
              const result = await ajax(
                "/jxqk",
                qs.stringify(this.jxqkform),
                "post"
              );
              console.log(this.jxqkform, "------", result);
              alert("这是教学情况");
            }
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 添加
    copeitem(type) {
      if (type == "jxqk") {
        console.log(444);
        const $orig = $("#daifuzhijx:first").clone(true);
        $("#bigboxjx").append($orig);
      }
    },
  },
};
</script>

<style lang="less" scoped>
.jiaoxueqingkuang {
  width: 100%;
  height: 768px;
  overflow: auto;
  .el-form {
    width: 98%;
    margin-top: 19px;
    margin-left: 26px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-between;
    .el-form-item {
      margin-left: 4px;
      width: 408px;
    }
    .lastitem {
      width: 94%;
      display: flex;
      justify-content: center;
      margin-left: 0;
    }
  }
}
.dingwei {
  width: 1025px !important;
}
.daifuzhi {
  position: relative;
  width: 100%;
  height: 130px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: center;
  border-radius: 4px;
  div {
    margin-bottom: 0;
  }
}
.daifuzhi:hover {
  background: #064cb425;
}
</style>